/*
 * ! Ext JS Library 4.0 Copyright(c) 2006-2011 Sencha Inc. licensing@sencha.com
 * http://www.sencha.com/license
 */

/**
 * @class Ext.ux.desktop.TaskBar
 * @extends Ext.toolbar.Toolbar
 */
Ext.define('Ext.ux.desktop.TaskBar', {
			extend : 'Ext.toolbar.Toolbar', // TODO - make this a basic hbox
											// panel...

			requires : ['Ext.button.Button', 'Ext.resizer.Splitter',
					'Ext.menu.Menu', 'Ext.ux.desktop.StartMenu'],
			height : 40,
			alias : 'widget.taskbar',

			cls : 'ux-taskbar',

			/**
			 * @cfg {String} startBtnText The text for the Start Button.
			 */
			startBtnText : '开始',

			initComponent : function() {
				var me = this;

				me.startMenu = new Ext.ux.desktop.StartMenu(me.startConfig);

				// me.quickStart = new Ext.toolbar.Toolbar(me.getQuickStart());

				me.windowBar = new Ext.toolbar.Toolbar(me.getWindowBarConfig());

				me.tray = new Ext.toolbar.Toolbar(me.getTrayConfig());

				me.items = [{
							xtype : 'button',
							cls : 'ux-start-button',
							iconCls : 'ux-start-button-icon',
							menu : me.startMenu,
							menuAlign : 'bl-tl',
							scale : 'medium',
							text : me.startBtnText
						}, // me.quickStart,
						{
							xtype : 'splitter',
							html : '&#160;',
							height : 14,
							width : 2, // TODO - there should be a CSS way here
							cls : 'x-toolbar-separator x-toolbar-separator-horizontal'
						},
						// '-',
						me.windowBar, '-', me.tray];

				me.callParent();
			},

			afterLayout : function() {
				var me = this;
				me.callParent();
				me.windowBar.el.on('contextmenu', me.onButtonContextMenu, me);
			},

			/**
			 * This method returns the configuration object for the Quick Start
			 * toolbar. A derived class can override this method, call the base
			 * version to build the config and then modify the returned object
			 * before returning it.
			 */
			getQuickStart : function() {
				var me = this, ret = {
					minWidth : 20,
					width : 60,
					items : [],
					enableOverflow : true
				};
				ret.items.push({
							tooltip : {
								text : '身份切换',
								align : 'bl-tl'
							},
							overflowText : '身份切换',
							icon : '/hhcommon/images/icons/group/group_go.png',
							handler : function() {
								ExtFrame.info('身份切换');
							},
							scope : me
						});
				ret.items.push({
							tooltip : {
								text : '身份切换',
								align : 'bl-tl'
							},
							overflowText : '身份切换',
							icon : '/hhcommon/images/icons/group/group_go.png',
							handler : function() {
								ExtFrame.info('身份切换');
							},
							scope : me
						});
				ret.items.push({
							tooltip : {
								text : '身份切换',
								align : 'bl-tl'
							},
							overflowText : '身份切换',
							icon : '/hhcommon/images/icons/group/group_go.png',
							handler : function() {
								ExtFrame.info('身份切换');
							},
							scope : me
						});
				return ret;
			},
			getTrayConfig : function() {
				var ret = {
					height : 40,
					width : 100,
					items : this.trayItems
				};
				delete this.trayItems;
				return ret;
			},

			getWindowBarConfig : function() {
				return {
					flex : 1,
					height : 40,
					cls : 'ux-desktop-windowbar',
					items : ['&#160;'],
					layout : {
						overflowHandler : 'Scroller'
					}
				};
			},

			getWindowBtnFromEl : function(el) {
				var c = this.windowBar.getChildByElement(el);
				return c || null;
			},

			onButtonContextMenu : function(e) {
				var me = this, t = e.getTarget(), btn = me
						.getWindowBtnFromEl(t);
				if (btn) {
					e.stopEvent();
					me.windowMenu.theWin = btn.win;
					me.windowMenu.showBy(t);
				}
			},

			onWindowBtnClick : function(btn) {
				var win = btn.win;

				if (win.minimized || win.hidden) {
					btn.disable();
					win.show(null, function() {
								btn.enable();
							});
				} else if (win.active) {
					btn.disable();
					win.on('hide', function() {
								btn.enable();
							}, null, {
								sinfgle : true
							});
					win.minimize();
				} else {
					win.toFront();
				}
			},

			addTaskButton : function(win) {
				var config = {
					scale : 'medium',
					icon : win.icon,
					enableToggle : true,
					toggleGroup : 'all',
					width : 120,
					margins : '0 2 0 3',
					text : Ext.util.Format.ellipsis(win.title, 20),
					listeners : {
						click : this.onWindowBtnClick,
						scope : this
					},
					win : win
				};

				var cmp = this.windowBar.add(config);
				cmp.toggle(true);
				return cmp;
			},

			removeTaskButton : function(btn) {
				var found, me = this;
				me.windowBar.items.each(function(item) {
							if (item === btn) {
								found = item;
							}
							return !found;
						});
				if (found) {
					me.windowBar.remove(found);
				}
				return found;
			},

			setActiveButton : function(btn) {
				if (btn) {
					btn.toggle(true);
				} else {
					this.windowBar.items.each(function(item) {
								if (item.isButton) {
									item.toggle(false);
								}
							});
				}
			}
		});

/**
 * @class Ext.ux.desktop.TrayClock
 * @extends Ext.toolbar.TextItem This class displays a clock on the toolbar.
 */
Ext.define('Ext.ux.desktop.TrayClock', {
	extend : 'Ext.toolbar.TextItem',

	alias : 'widget.trayclock',

	cls : 'ux-desktop-trayclock',

	html : '&#160;',

	timeFormat : 'g:i A',

	tpl : '{time}',

	initComponent : function() {
		var me = this;

		me.callParent();

		if (typeof(me.tpl) == 'string') {
			me.tpl = new Ext.XTemplate(me.tpl);
		}
	},

	afterRender : function() {
		var me = this;
		Ext.Function.defer(me.updateTime, 100, me);
		me.callParent();
	},

	onDestroy : function() {
		var me = this;

		if (me.timer) {
			window.clearTimeout(me.timer);
			me.timer = null;
		}

		me.callParent();
	},

	updateTime : function() {
		var me = this, time = Ext.Date.format(new Date(), me.timeFormat), text = me.tpl
				.apply({
							time : time
						});
		if (me.lastText != text) {
			me.setText(text);
			me.lastText = text;
		}
		me.timer = Ext.Function.defer(me.updateTime, 10000, me);
	}
});
